<script setup>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "axios";

//导入组件
const router = useRouter();
function onSelect(index) {
  router.push(index);
}
// 获取token与info
// localStorage.clear();
const loginer = reactive({
  token: localStorage.getItem("token"),
  info: localStorage.getItem("info"),
  avatar_url:localStorage.getItem("avatar")
});




const dialogFormVisible = ref(false);
// console.log(loginer);

// 检查登录信息，如果登录信息失效，重新登录，
const checkLoginer = () => {
  axios({
    url: "http://localhost:8080/checkLoginer",
    method: "post",
    data: {
      token: loginer.token,
    },
    headers: {
      "Content-type": "application/json", // 默认
      //   "Content-type": "application/x-www-form-urlencoded",
    },
  }).then((res) => {
    if ((res.data.code = 0)) {
      // localStorage.setItem("user",res.data.data.user)
    } else {
      localStorage.clear();
      ElMessage({
        message: "登录过期，重新登录",
        type: "error",
        duration: 1500,
      });
      setTimeout(() => {
        router.push("/login");
      }, 1500);
    }
  });
};
//检查是否登录没有登录去登录
// checkLoginer();

const toLogin = () => {
  router.push("/login");
};

//退出登录
const exit = () => {
  //后端清除数据
  axios({
    url: "http://localhost:8080/exit",
    method: "post",
    data: {
      token: localStorage.getItem("token"),
    },
    headers: {
      "Content-type": "application/json", // 默认
      //   "Content-type": "application/x-www-form-urlencoded",
    },
  })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
  //前端清除登录数据
  localStorage.clear();
  location.reload();
};
</script>

<template>
  <div class="main-layout">
    <el-container>
      <el-affix :offset="0">
        <el-header>
          <el-menu
            class="main_nenu"
            mode="horizontal"
            :ellipsis="false"
            :default-active="$router.path"
            @select="onSelect"
          >
            <el-menu-item>
              <img style="width: 50px" src="@\assets\logo.jpg" alt="" />
              <div>空梦俱乐部</div>
            </el-menu-item>

            <div class="flex-grow" />

            <el-sub-menu index="planeBase">
              <template #title>
                <el-icon><Position /></el-icon>
                尊享飞行
              </template>
              <el-menu-item index="planeTrain">
                <el-icon><Reading /></el-icon>
                飞行培训
              </el-menu-item>
              <el-menu-item index="planeExperince">
                <el-icon><Grape /></el-icon>
                飞行体验
              </el-menu-item>
              <el-menu-item index="planeSkydiving">
                <el-icon><School /></el-icon>
                跳伞飞行
              </el-menu-item>
              <el-menu-item index="planeCharter">
                <el-icon><GobletSquareFull /></el-icon>
                包机飞行
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon><PriceTag /></el-icon>
                配套服务
              </template>
              <el-menu-item index="planeHosted">
                <el-icon><Timer /></el-icon>
                飞机托管
              </el-menu-item>
              <el-menu-item index="planeRent">
                <el-icon><Wallet /></el-icon>
                飞机租赁
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3" v-if="loginer.token != null">
              <template #title>
                <img
                  class="my_profile"
                  :src="loginer.avatar_url"
                  alt=""
                />
              </template>
              <el-menu-item index="myInfo" v-if="loginer.info == 3 || loginer.info == 2">
                <el-icon><Setting /></el-icon>
                个人信息
              </el-menu-item>
              <el-menu-item
                index="myAppoint"
                v-if="loginer.info == 3 || loginer.info == 2"
              >
                <el-icon><Bell /></el-icon>
                我的预约
              </el-menu-item>
              <el-menu-item index="myOrder" v-if="loginer.info == 3 || loginer.info == 2">
                <el-icon><DocumentCopy /></el-icon>
                我的订单
              </el-menu-item>
              <el-menu-item
                index="myMessage"
                v-if="loginer.info == 3 || loginer.info == 2"
              >
                <el-icon> <ChatDotRound /></el-icon>
                我的消息
              </el-menu-item>
              <el-menu-item index="dispatch" v-if="loginer.info == 1">
                <el-icon><Monitor /></el-icon>
                调度管理
              </el-menu-item>
              <el-menu-item index="myStudent" v-if="loginer.info == 2">
                <el-icon><Search /></el-icon>
                我的学员
              </el-menu-item>
              <el-menu-item index="/admin" v-if="loginer.info == 0">
                <el-icon><House /></el-icon>
                总管理
              </el-menu-item>
              <el-menu-item @click="exit">
                <el-icon><HelpFilled /></el-icon>
                退出登录
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item
              class="login_menu_clolr"
              v-else="loginer == false"
              @click="visible = true"
            >
              <el-button type="primary" @click="toLogin" v-if="loginer.token == null"
                >登录</el-button
              >
            </el-menu-item>
          </el-menu>
        </el-header>
      </el-affix>
      <el-backtop :right="100" :bottom="100" />

      <el-main>
        <router-view></router-view>
      </el-main>

      <el-footer>
        <p>Copyright© 2020 All Rights Reserved.</p>
        <p>空梦飞行及俱乐部</p>
        地址：闽侯县上街镇学院路23号 &nbsp;&nbsp;&nbsp 邮编：614216&nbsp;&nbsp;&nbsp;
        电话:0772-7754356
      </el-footer>
    </el-container>
  </div>
</template>

<style lang="less">
.main-layout {
  .flex-grow {
    flex-grow: 1;
    outline: none;
  }
  .el-header {
    margin: auto;
    padding: 0;
    background: rgb(255, 255, 255);
  }
  .el-menu {
    width:1200px;
    margin: auto;
    font: 600 18px "宋体";
    font-size: 18px;
  }

  .el-menu-item {
    font-size: 18px;
  }
  .el-sub-menu__title {
    font-size: 18px;
  }

  .my_profile {
    border-radius: 50%;
    height: 35px;
    width: 35px;
    outline: none;
  }
  .el-main {
    margin: auto;
    width: 1200px;
    padding: 0;
    min-height: 400px;
    background: rgb(255, 255, 255);
  }
  .el-footer {
    margin: auto;
    width: 1200px;
    height: auto;
    background: rgb(240, 240, 240);
    font-size: 12px;
  }
  .login_menu_clolr {
    --el-menu-hover-bg-color: var(--el-fill-color-blank);
  }
}
</style>
